<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>手风琴特效</title>
	<style>
	    /* 
          css:层叠样式表   
          id>class>标签>
        */

		*{/* 通配符选择器*/
			padding: 0;/* 内边距*/
            margin: 0;/* */
		}
		ul{
			list-style: none;/*去掉列表的点*/
		}
		body{
			background: #ccc;/*背景颜色浅灰*/
		}
		li{
			position: relative;
			float: left;
            width: 160px;
            transition: all 1s;
            box-shadow: 0 0 20px 10px rgba(0,0,0,0.5);
            border-left: 1px solid #666;
}
 
		}
		#shou_feng_qin{/*id选择器 */
			width: 805px;
            height: 320px;
            overflow: hidden;
            margin: 100px auto;
            box-shadow: 0 0 15px 5px rgba(0,0,0,0.5);
			
		}
		.img_title{/* 类选择器*/
			position: absolute;
            bottom: 0;
            left: 0;
            width: 640px;
		}
		.img_title>a{/*子选择器 */
			color: #fff;
            font-size: 16px;
            display: block;
            height: 40px;
            text-decoration: none;
            padding-left: 20px;
            line-height: 40px;
            background: rgba(0,0,0,0.5);

		}
		/*： hover 伪类代表鼠标悬停*/
		ul:hover li{
			width:40px;
		}
		ul li:hover{
			width: 640px;
		}

	</style>
</head>	
<body>
<div id="shou_feng_qin">
	<ul><!--无序列表ol -->
		<li><!-- 列表项-->
			<div class="img_title"><!--框 -->
			<a href="#">
			功夫熊猫</a><!--超链接 -->
			</div>
			<a href="#"><!--超链接 -->
			<!-- 图片-->
			<img src="1.jpg" alt=""></a>
		</li>
		<li>
			<div class="img_title"><a href="#">
			机器人总动员</a></div>
			<a href="#"><img src="2.jpg" alt=""></a>
		</li>
		<li>
			<div class="img_title"><a href="#">
			玩具总动员</a></div>
			<a href="#"><img src="3.jpg" alt=""></a>
		</li>
		<li>
			<div class="img_title"><a href="#">
			飞屋环游记</a></div>
			<a href="#"><img src="4.jpg" alt=""></a>
		</li>
		<li>
			<div class="img_title"><a href="#">
			汽车总动员</a></div>
			<a href="#"><img src="5.jpg" alt=""></a>
		</li>
	</ul>

</div></body>
</html>